<template>
	<div :style="{cursor:isDragging?'move':'auto'}" v-on:contextmenu="showContext" class="sc-workflow-design"
		@mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"
		@mouseleave="handleMouseLeave">

		<el-button-group style="position: absolute;z-index: 2000;">
			<el-button icon="el-icon-minus" size="small" title="缩小" @click="handleScaleDown"></el-button>
			<el-button icon="el-icon-plus" size="small" title="放大" @click="handleScaleUp"></el-button>
			<el-button icon="el-icon-full-screen" size="small" title="复原" @click="handleReset"></el-button>
		</el-button-group>

		<div class="box-scale" :style="{ transform: `translate(${left}px, ${top}px) scale(${scale})` }">
			<node-wrap v-if="nodeConfig" v-model="nodeConfig"></node-wrap>
			<div class="end-node">
				<div class="end-node-circle"></div>
				<div class="end-node-text">流程结束</div>
			</div>
		</div>
		<!-- 这里是选择器用来选择插件 -->
		<use-select v-if="selectVisible" ref="useselect" @closed="selectVisible=false"></use-select>
	</div>
</template>

<script>
	import nodeWrap from './nodeWrap'
	import useSelect from './pluginSelect'

	export default {
		name: "scWorkflow",
		provide() {
			return {
				select: this.selectHandle,
				getNodeName: this.getNodeName
			}
		},
		props: {
			modelValue: {
				type: Object,
				default: () => {}
			}
		},
		components: {
			nodeWrap,
			useSelect
		},
		data() {
			return {
				nodeConfig: this.modelValue,
				selectVisible: false,
				top: 0,
				left: 0,
				startX: 0,
				startY: 0,
				scale: 1, // 初始化缩放比例
				isDragging: false,
				nodes: [],
			}
		},
		watch: {
			modelValue(val) {
				this.nodeConfig = val
			},
			nodeConfig(val) {
				this.$emit("update:modelValue", val)
			}
		},
		mounted() {

		},
		methods: {
			getNodeName(name) {

				var names = [];

				this.forNode(this.nodeConfig, null, (item, parent) => {
					if (item?.name && item.name.startsWith(name)) {
						names.push(item.name);
					}
				})

				if (!names.includes(name)) {
					return name;
				}

				let counter = 1;
				let newName = `${name}${counter}`;

				// 循环检查直到找到不重复的名字
				while (names.includes(newName)) {
					counter++;
					newName = `${name}${counter}`;
				}

				return newName;

			},
			updateIndex() {
				var i = 1;
				this.nodes = [];
				this.forNode(this.nodeConfig, null, (item, parent) => {
					if (Object.keys(item).length > 0) {
						item.parent = parent
						if (item.type != 'stop' && item.type) {
							item.index = item.type == 'switch' ? item.parent.index : i++;
							if (item.type != 'switch' && item.type != 'stop') {
								this.nodes.push(item)
							}
						}
					}
				})
			},
			forNode(node, parent, callback) {
				callback(node, parent);
				if (node.ifNode) {
					if (Array.isArray(node.ifNode)) {
						for (let child of node.ifNode) {
							this.forNode(child, node, callback);
						}
					} else {
						this.forNode(node.ifNode, node, callback);
					}
				}
				if (node.loopNode) {
					if (Array.isArray(node.loopNode)) {
						for (let child of node.loopNode) {
							this.forNode(child, node, callback);
						}
					} else {
						this.forNode(node.loopNode, node, callback);
					}
				}
				if (node.conditionNodes) {
					if (Array.isArray(node.conditionNodes)) {
						for (let child of node.conditionNodes) {
							this.forNode(child, node, callback);
						}
					}
				}
				if (node.childNode) {
					if (Array.isArray(node.childNode)) {
						for (let child of node.childNode) {
							this.forNode(child, node, callback);
						}
					} else {
						this.forNode(node.childNode, node, callback);
					}
				}
			},
			showContext(event) {
				event.preventDefault()
			},
			handleMouseDown(e) {
				this.startX = e.clientX
				this.startY = e.clientY
				this.isDragging = true
			},
			handleMouseMove(e) {
				if (this.isDragging) {
					let dx = e.clientX - this.startX
					let dy = e.clientY - this.startY
					this.left += dx
					this.top += dy
					this.startX = e.clientX
					this.startY = e.clientY
				}
			},
			handleMouseUp() {
				this.isDragging = false
			},
			handleMouseLeave() {
				this.isDragging = false
			},
			handleScaleDown() {
				// 每次缩小10%
				this.scale *= 0.9
			},
			handleScaleUp() {
				// 每次放大10%
				this.scale *= 1.1
			},
			handleReset() {
				this.scale = 1.0
				this.left = 0
				this.top = 0
			},
			selectHandle(type, cb) {
				this.selectVisible = true
				this.$nextTick(() => {
					this.$refs.useselect.open(type, cb)
				})
			}
		}
	}
</script>

<style lang="scss">
	.sc-workflow-design {
		width: 100%;
	}

	.sc-workflow-design .box-scale {
		display: inline-block;
		position: relative;
		width: 100%;
		padding: 54.5px 50px;
		align-items: flex-start;
		justify-content: center;
		flex-wrap: wrap;
		min-width: min-content;
	}

	.sc-workflow-design {
		.node-wrap {
			display: inline-flex;
			width: 100%;
			flex-flow: column wrap;
			justify-content: flex-start;
			align-items: center;
			padding: 0px 50px;
			position: relative;
			z-index: 1;
		}

		.node-wrap-box {
			display: inline-flex;
			flex-direction: column;
			position: relative;
			min-width: 240px;
			max-width: 240px;
			min-height: 50px;
			flex-shrink: 0;
			background: rgb(255, 255, 255);
			border-radius: 4px;
			cursor: pointer;
			box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
		}

		.node-wrap-box::before {
			content: "";
			position: absolute;
			top: -12px;
			left: 50%;
			transform: translateX(-50%);
			width: 0px;
			border-style: solid;
			border-width: 8px 6px 4px;
			border-color: rgb(202, 202, 202) transparent transparent;
			background: #f6f8f9;
		}

		.node-wrap-box.start-node:before {
			content: none
		}

		.node-wrap-box .title {
			height: 24px;
			line-height: 24px;
			color: #fff;
			padding-left: 16px;
			padding-right: 30px;
			border-radius: 4px 4px 0 0;
			position: relative;
			display: flex;
			align-items: center;
		}

		.node-wrap-box .title .icon {
			margin-right: 5px;
		}

		.node-wrap-box .title .close {
			font-size: 15px;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 10px;
			display: none;
		}

		.node-wrap-box .content {
			position: relative;
			padding: 8px;
		}

		.node-wrap-box .content .placeholder {
			color: #999;
		}

		.node-wrap-box:hover .close {
			display: block;
		}

		.add-node-btn-box {
			width: 240px;
			display: inline-flex;
			flex-shrink: 0;
			position: relative;
			z-index: 1;
		}

		.add-node-btn-box:before {
			content: "";
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			z-index: -1;
			margin: auto;
			width: 2px;
			height: 100%;
			background-color: rgb(202, 202, 202);
		}

		.add-node-btn {
			user-select: none;
			width: 240px;
			padding: 20px 0px 32px;
			display: flex;
			justify-content: center;
			flex-shrink: 0;
			flex-grow: 1;
		}

		.add-node-btn span {}

		.add-branch {
			justify-content: center;
			padding: 0px 10px;
			position: absolute;
			top: -16px;
			left: 50%;
			transform: translateX(-50%);
			transform-origin: center center;
			z-index: 1;
			display: inline-flex;
			align-items: center;
		}

		.branch-wrap {
			display: inline-flex;
			width: 100%;
		}

		.branch-box-wrap {
			display: flex;
			flex-flow: column wrap;
			align-items: center;
			min-height: 270px;
			width: 100%;
			flex-shrink: 0;
		}

		.col-box {
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			background: #f6f8f9;
		}

		.branch-box {
			display: flex;
			overflow: visible;
			min-height: 180px;
			height: auto;
			border-bottom: 2px solid #ccc;
			border-top: 2px solid #ccc;
			position: relative;
			margin-top: 15px;
		}

		.branch-box .col-box::before {
			content: "";
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			z-index: 0;
			margin: auto;
			width: 2px;
			height: 100%;
			background-color: rgb(202, 202, 202);
		}

		.condition-node {
			display: inline-flex;
			flex-direction: column;
			min-height: 220px;
		}

		.condition-node-box {
			padding-top: 30px;
			padding-right: 50px;
			padding-left: 50px;
			justify-content: center;
			align-items: center;
			flex-grow: 1;
			position: relative;
			display: inline-flex;
			flex-direction: column;
		}

		.condition-node-box::before {
			content: "";
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			margin: auto;
			width: 2px;
			height: 100%;
			background-color: rgb(202, 202, 202);
		}

		.auto-judge {
			position: relative;
			width: 240px;
			min-height: 72px;
			background: rgb(255, 255, 255);
			border-radius: 4px;
			padding: 15px 15px;
			cursor: pointer;
			box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
		}

		.auto-judge::before {
			content: "";
			position: absolute;
			top: -12px;
			left: 50%;
			transform: translateX(-50%);
			width: 0px;
			border-style: solid;
			border-width: 8px 6px 4px;
			border-color: rgb(202, 202, 202) transparent transparent;
			background: rgb(245, 245, 247);
		}

		.auto-judge .title {
			line-height: 16px;
		}

		.auto-judge .title .node-title {
			color: #15BC83;
		}

		.auto-judge .title .close {
			font-size: 15px;
			position: absolute;
			top: 15px;
			right: 15px;
			color: #999;
			display: none;
		}

		.auto-judge .title .priority-title {
			position: absolute;
			top: 15px;
			right: 15px;
			color: #999;
		}

		.auto-judge .content {
			position: relative;
			padding-top: 15px;
		}

		.auto-judge .content .placeholder {
			color: #999;
		}

		.auto-judge:hover {
			.close {
				display: block;
			}

			.priority-title {
				display: none;
			}
		}

		.top-left-cover-line,
		.top-right-cover-line {
			position: absolute;
			height: 6px;
			width: 50%;
			background-color: #f6f8f9;
			top: -3px;
		}

		.bottom-left-cover-line,
		.bottom-right-cover-line {
			position: absolute;
			height: 6px;
			width: 50%;
			background-color: #f6f8f9;
			bottom: -3px;
		}

		.top-left-cover-line {
			left: -1px;
		}

		.top-right-cover-line {
			right: -1px;
		}

		.bottom-left-cover-line {
			left: -1px;
		}

		.bottom-right-cover-line {
			right: -1px;
		}

		.end-node {
			border-radius: 50%;
			font-size: 14px;
			color: rgba(25, 31, 37, .4);
			text-align: left;
		}

		.end-node-circle {
			width: 10px;
			height: 10px;
			margin: auto;
			border-radius: 50%;
			background: #dbdcdc;
		}

		.end-node-text {
			margin-top: 5px;
			text-align: center;
		}

		.auto-judge:hover {
			.sort-left {
				display: flex;
			}

			.sort-right {
				display: flex;
			}
		}

		.auto-judge .sort-left {
			position: absolute;
			top: 0;
			bottom: 0;
			z-index: 1;
			left: 0;
			display: none;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

		.auto-judge .sort-right {
			position: absolute;
			top: 0;
			bottom: 0;
			z-index: 1;
			right: 0;
			display: none;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

		.auto-judge .sort-left:hover,
		.auto-judge .sort-right:hover {
			background: #eee;
		}

		.auto-judge:after {
			pointer-events: none;
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 2;
			border-radius: 4px;
			transition: all .1s;
		}

		.auto-judge:hover:after {
			border: 1px solid #3296fa;
			box-shadow: 0 0 6px 0 rgba(50, 150, 250, .3);
		}

		.node-wrap-box:after {
			pointer-events: none;
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 2;
			border-radius: 4px;
			transition: all .1s;
		}

		.node-wrap-box:hover:after {
			border: 1px solid #3296fa;
			box-shadow: 0 0 6px 0 rgba(50, 150, 250, .3);
		}
	}

	.tags-list {
		margin-top: 15px;
		width: 100%;
	}

	.add-node-popover-body {}

	.add-node-popover-body li {
		display: inline-block;
		width: 80px;
		text-align: center;
		padding: 10px 0;
	}

	.add-node-popover-body li i {
		border: 1px solid var(--el-border-color-light);
		width: 40px;
		height: 40px;
		border-radius: 50%;
		text-align: center;
		line-height: 38px;
		font-size: 18px;
		cursor: pointer;
	}

	.add-node-popover-body li i:hover {
		border: 1px solid #3296fa;
		background: #3296fa;
		color: #fff !important;
	}

	.add-node-popover-body li p {
		font-size: 12px;
		margin-top: 5px;
	}

	.node-wrap-drawer__title {
		padding-right: 40px;
	}

	.node-wrap-drawer__title label {
		cursor: pointer;
	}

	.node-wrap-drawer__title label:hover {
		border-bottom: 1px dashed #409eff;
	}

	.node-wrap-drawer__title .node-wrap-drawer__title-edit {
		color: #409eff;
		margin-left: 10px;
		vertical-align: middle;
	}

	.dark .sc-workflow-design {

		.node-wrap-box,
		.auto-judge {
			background: #2b2b2b;
		}

		.col-box {
			background: var(--el-bg-color);
		}

		.top-left-cover-line,
		.top-right-cover-line,
		.bottom-left-cover-line,
		.bottom-right-cover-line {
			background-color: var(--el-bg-color);
		}

		.node-wrap-box::before,
		.auto-judge::before {
			background-color: var(--el-bg-color);
		}

		.branch-box .add-branch {
			background: var(--el-bg-color);
		}

		.end-node .end-node-text {
			color: #d0d0d0;
		}

		.auto-judge .sort-left:hover,
		.auto-judge .sort-right:hover {
			background: var(--el-bg-color);
		}
	}

	/* 最新添加的 */

	.item-index {
		position: absolute;
		color: #2f3a65;
		font-weight: bold;
		left: -28px;
	}

	.flex {
		display: flex;
		display: -webkit-flex;
	}

	.ai-center {
		align-items: center;
	}

	.jc-center {
		justify-content: center;
	}

	.item-icon {
		margin-right: 15px;
		width: 40px;
		height: 40px;
		overflow: hidden;
	}

	.item-icon img {
		width: 100%;
		height: 100%;
	}

	.high-light {
		font-weight: 500;
		line-height: 24px;
		color: #0e1943;
	}

	.item-icon .default-icon {
		background-color: #2e7fff;
		color: rgb(255, 255, 255);
		font-size: 20px;
		width: 36px;
		height: 36px;
		border-radius: 6px;
	}

	.anticon {
		text-rendering: optimizelegibility;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: inherit;
		display: inline-block;
		font-style: normal;
		line-height: 0;
		text-align: center;
		text-transform: none;
		vertical-align: -0.125em;
	}

	.anticon svg {
		display: inline-block;
	}

	.close {
		position: absolute;
		right: 8px;
		display: none;
	}

	.content:hover .close {
		display: block;
	}

	.stop-node+div.node-wrap .node-wrap-box::before {
		border-width: 0px;
	}

	.stop-node+div.end-node {
		display: none;
	}

	.if-wrap .stop-node .stop-node-bottom-cover {
		background-color: transparent !important;
	}

	.while-wrap .stop-node .stop-node-bottom-cover {
		background-color: transparent !important;
	}

	.branch-box .col-box {
		border-right: 2px solid #f6f8f9;
		border-left: 2px solid #f6f8f9;
	}
</style>
